<template>
  <div class="table">
    <el-table
      :height="height"
      v-loading="loading"
      :data="dataList"
      style="width: 100%"
      class="center-table"
      @selection-change="handleSelectionChange"
    >
      <el-table-column v-if="!isCheckbox" type="selection" width="55" />
      <el-table-column type="index" :index="indexMethod"  label="序号" width="50" />
      <ColumnData v-for="column of columns" :key="column.label" :item="column" />
      <slot name="status" />
      <el-table-column fixed="right" v-if="!hasOperate" label="操作" width="150">
        <template #default="scope">
          <div class="operate">
            <slot :row="scope.row" name="operate" />
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script lang="ts">
import { defineComponent, watch, ref } from 'vue'
import ColumnData from './column-data.vue'
export default defineComponent({
  components: {
    ColumnData,
  },
  emits: {
    modalValueChange: null,
    selectList: null,
  },
  props: {
    height:{
      type: Number,
      default:550
    },
    tableArr: {
      type: Array,
      required: true,
    },
    columns: {
      type: Array,
      required: true,
    },
    loading: {
      type: Boolean,
    },
    hasOperate: {
      type: Boolean,
      defaults: true,
    },
    isCheckbox: {
      type: Boolean,
    },
    pageSize:{
      type: Number,
      defaults: 10,
      required: true,
    },
    pageNum:{
      type: Number,
      defaults: 1,
      required: true,
    }
  },
  setup(props, { emit }) {
    let dataList: any = ref(props.tableArr)
    const isperate = ref(props.hasOperate)
    const isLoading = ref(props.loading)
    const handleSelectionChange = (selectList) => {
      emit('selectList', selectList)
    }
    const indexMethod = (index)=>{
      return props.pageSize*(props.pageNum-1) +index+1
    }
    watch(
      () => props.tableArr,
      (newVal) => {
        dataList.value = newVal
      }
    )
    watch(
      () => props.loading,
      (newVal) => {
        console.log(newVal, 'props.loading')
        isLoading.value = newVal
      }
    )
    return {
      isLoading,
      isperate,
      dataList,
      indexMethod,
      handleSelectionChange,
    }
  },
})
</script>

<style lang="scss" scoped>
.table {
  margin-top: 15px;
}
/deep/.el-pagination .btn-next .el-icon {
  margin: 0 auto;
}

/deep/.el-pagination .btn-prev .el-icon {
  margin: 0 auto;
}

// :deep(.center-table td),
// :deep(.center-table th) {
//   text-align: center !important;
// }
// :deep(.el-table td.is-center) {
//   text-align: left !important;
// }
// .operate{
//   float: right;
// }
</style>
